Bootstrap là gì? Hướng dẫn cách sử dụng Bootstrap đơn giản

Bạn có phải là một  front end developer - Lập trình giao diện website? Bạn đang đau đầu cới việc viết đi viết lại cú pháp CSS? Đó là lí do bạn nên đọc ngay bài viết "Bootstrap là gì? Hướng dẫn cách sử dụng Bootstrap" sau đây của chúng tôi để đỡ bị stress.

Bootstrap là gì?

Bạn có thể đã quen thuộc với chức năng của frameworks là gì. Nó tập hợp các cú pháp dành riêng cho nhiệm nào đó trong một bộ sưu tập để giúp các web developer xây dựng website nhanh hơn nhiều, vì họ không cần phải lo về các lệnh và chức năng cơ bản.

Mặc dù vậy, vẫn thiếu sự thống nhất do việc các thư viện được sử dụng quá nhiều, cần phải thay đổi liên tục. Bootstrap là câu trả lời cho vấn đề này.

Front-end framework là mã nguồn mở, ban đầu được xây dựng bởi Mark Otto và Jacob Thornton để lập trình web front-end nhanh hơn và dễ dàng hơn.

Nó chứa tất cả các mẫu thiết kế dựa trên HTML và CSS với nhiều chức năng và thành phần khác nhau, như điều hướng, hệ thống lưới, băng chuyền hình ảnh và các nút.

Mặc dù Bootstrap giúp tiết kiệm thời gian của nhà phát triển khỏi việc phải quản lý các template nhiều lần, nhưng mục tiêu chính của nó là tạo ra các responsive website. Nó cho phép giao diện người dùng của trang web có thể hoạt động tối ưu trên mọi kích thước màn hình, trên điện thoại màn hình nhỏ hoặc máy tính để bàn màn hình lớn.

Do đó, các nhà phát triển không cần xây dựng các trang web dành riêng cho từng thiết bị và bị giới hạn phạm vi đối tượng nữa.

Do sự phổ biến của nó, ngày càng nhiều cộng đồng Bootstrap xuất hiện. Đó là một nơi tuyệt vời để các nhà phát triển và nhà thiết kế trao đổi kiến ​​thức và thảo luận về các bản vá framework mới nhất.

Các file chính của Bootstrap

Vì Bootstrap bao gồm một tập hợp các cú pháp thực hiện các chức năng cụ thể, điều đó chỉ có lý khi framework có các loại file khác nhau trong đó. Dưới đây là ba file chính quản lý giao diện người dùng và chức năng của trang web.

Bootstrap.css

Bootstrap.css là một framework CSS sắp xếp và quản lý bố cục của trang web. Trong khi HTML quản lý nội dung và cấu trúc của trang web, CSS xử lý bố cục của trang web. Vì lý do đó, cả hai cấu trúc cần cùng tồn tại để thực hiện một hành động cụ thể.

Do các chức năng của nó, CSS cho phép bạn tạo giao diện thống nhất trên bao nhiêu trang web tùy thích. Giờ thì bạn có thể nói lời tạm biệt với việc phải ngồi hàng giờ để chỉnh sửa thủ công chỉ để thay đổi độ rộng của đường viền.

Với CSS, tất cả những gì bạn cần làm là giới thiệu các trang web đến file CSS. Bất kỳ thay đổi cần thiết có thể được thực hiện trong file đó một mình.

Các hàm CSS không chỉ giới hạn ở các kiểu văn bản vì chúng có thể được sử dụng để định dạng các khía cạnh khác của trang web như bảng và bố cục hình ảnh.

Vì CSS có rất nhiều khai báo và bộ chọn, việc ghi nhớ tất cả những cái đó có thể mất chút thời gian.

Bootstrap.js

File này là phần cốt lõi của Bootstrap. Nó bao gồm các file JavaScript chịu trách nhiệm cho việc tương tác của trang web.

Để tiết kiệm thời gian khi viết cú pháp JavaScript nhiều lần, các nhà phát triển có xu hướng sử dụng jQuery. Nó có một thư viện JavaScript đa nền tảng, mã nguồn mở phổ biến cho phép bạn thêm các chức năng khác nhau vào một trang web.

Dưới đây là một vài ví dụ về những gì jQuery có thể làm:

- Thực hiện các yêu cầu Ajax như loại trự dữ liệu từ một vị trí khác một cách linh hoạt - Tạo tiện ích bằng bộ sưu tập plugin JavaScript - Tạo hình động tùy chỉnh bằng các thuộc tính CSS - Thêm tính năng động cho nội dung trang web Mặc dù Bootstrap với các thuộc tính CSS và element HTML có thể hoạt động tốt, nhưng nó cần jQuery để tạo ra thiết kế responsive. Nếu không, bạn chỉ có thể sử dụng các phần tĩnh của CSS.

Glyphicons

Icons là một phần không thể thiếu của giao diện trang web. Chúng thường được liên kết với các hành động và dữ liệu nhất định trong giao diện người dùng. Bootstrap sử dụng Glyphicons để đáp ứng nhu cầu đó.

Bootstrap bao gồm một bộ Halflings Glyphicons đã được mở khóa để sử dụng miễn phí. Phiên bản miễn phí có giao diện chuẩn nhưng phù hợp với các chức năng thiết yếu.

Nếu bạn muốn tìm icon có phong cách hơn, Glyphicons cũng bán các bộ icon premium khác nhau, chắc chắn sẽ trông đẹp hơn trên từng trang web cụ thể.

Bạn cũng có thể tải các biểu tượng riêng biệt và theo chủ đề xuống miễn phí trên các trang web khác nhau như Flaticon, GlyphSearch và Icons8.

Một số icon có thể bị ảnh hưởng bởi CSS để thay đổi giao diện trong khi các icon khác thì mặc định. Hãy sử dụng icons phù hợp nhất với trang web bạn cần.

Hướng dẫn cách sử dụng Bootstrap

Để hiểu được cách sử dụng bootstrap, hãy xem ví dụ dưới đây.

html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Mã hóa ký tự cho tài liệu HTML. Trong trường hợp này, UTF-8 đề cập đến Unicode.

meta charset="utf-8"

Cho biết bộ ký tự được sử dụng để viết trang web.

meta http-equiv="X-UA-Compatible"

Xác định phiên bản Internet Explorer sẽ hiển thị trang. Sử dụng chế độ Edge, nó được cài đặt để sử dụng chế độ cao nhất hiện có.

meta name="viewport"

Đảm bảo rằng trang có tỷ lệ 1: 1 với kích thước khung nhìn.

link href="css/bootstrap.min.css" rel="stylesheet"

Đây là phần chúng tôi thêm Bootstrap core CSS.

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"

Tải jQuery thông qua Google CDN. Sẽ tốt hơn để bạn tải nó từ CDN qua HTTP vì file có thể được lưu trong bộ nhớ cache trong một năm.

src="js/bootstrap.min.js

Thêm JavaScript lõi Bootstrap. Cú pháp này phải luôn nằm dưới cú pháp jQuery để hoạt động đúng. Quá trình bổ sung có thể được thực hiện thông qua URL của Google hoặc tải xuống thủ công.

Bài viết trên đây đã cung cấp đến cho bạn đọc nhiều kiến thức bổ ích về Bootstrap và cách sử dụng Bootstrap dễ hiểu nhất. Chúc bạn lập trình giao diện website thuận lợi.